import { getHospitalDetail } from '@/api/hospital/hospitalList'
import { IHospitalDetailResponse } from '@/api/hospital/model/hospitalListTypes'
import { Button, Card, Descriptions, Image } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'

export default function HospitalDetail() {
    // 定义编程式导航对象
    const navigate = useNavigate()
    // 获取path【params】参数 id
    const {id} = useParams()
    // 定义状态
    let [hospitalDetail, setHospitalDetail] = useState<IHospitalDetailResponse>()

    async function _getHospitalDetail(){
        let hospitalDetail = await getHospitalDetail(id as string)
        console.log(hospitalDetail)
        // 设置状态
        setHospitalDetail(hospitalDetail)
    }
    useEffect(()=>{
        _getHospitalDetail()
    },[])
    return (
        <Card>
            <Descriptions title="基本信息" bordered>
                <Descriptions.Item span={1} label="医院名称">{hospitalDetail?.hospital.hosname}</Descriptions.Item>
                <Descriptions.Item span={2} label="医院logo">
                    {hospitalDetail?.hospital.logoData && <Image width={100} src={`data:image/jpeg;base64,${hospitalDetail?.hospital.logoData}`}/>}
                </Descriptions.Item>
                <Descriptions.Item span={1} label="医院编码">{hospitalDetail?.hospital.hoscode}</Descriptions.Item>
                <Descriptions.Item span={2} label="医院地址">{hospitalDetail?.hospital.address}</Descriptions.Item>
                <Descriptions.Item label="坐车路线" span={3}>
                    {hospitalDetail?.hospital.route}
                </Descriptions.Item>
                <Descriptions.Item label="医院简介" span={3}>
                    {hospitalDetail?.hospital.intro}
                </Descriptions.Item>
            </Descriptions>

            <Descriptions className='mt20' title="预约规则信息" bordered>
                <Descriptions.Item span={1} label="预约周期">{hospitalDetail?.bookingRule.cycle}</Descriptions.Item>
                <Descriptions.Item span={2} label="放号时间">{hospitalDetail?.bookingRule.releaseTime}</Descriptions.Item>
                <Descriptions.Item span={1} label="停挂时间">{hospitalDetail?.bookingRule.stopTime}</Descriptions.Item>
                <Descriptions.Item span={2} label="退号时间">{hospitalDetail?.bookingRule.quitTime}</Descriptions.Item>
                <Descriptions.Item label="预约规则" span={3}>
                    {hospitalDetail?.bookingRule.rule.map((item,index)=>(
                        <p key={index}>{item}</p>
                    ))}
                </Descriptions.Item>
            </Descriptions>

            <Button className='mt20' onClick={()=>navigate(-1)}>返回</Button>
        </Card>
    )
}
